import { addEventListener, renderHouseInfo } from "../../common/render";
import {
  formatHouseInfo,
  formatUrl,
  getActiveStr,
  initDevelop,
  requestAjax,
  shareVr,
} from "../../common/utils";
import { initScene } from "../../common/scene";

$(document).ready(function () {
  initDevelop().then(() => {
    const BASE_URL = "";
    addEventListener();

    // 获取vr数据
    if (formatUrl.getQuery("vr")) {
      $("#pano").hide()
      $(".layer-loading").show()
      requestAjax({
        url: "/shulan-jjr-gateway/api/v1/hou/port/xflvr/query",
        data: {
          vrId: formatUrl.getQuery("vr"),
        },
      }).then((res) => {
        if (res.isSuccess) {
          $("#pano").show()
          $(".layer-loading").hide()
          let data = res.content.panorama;
          let scene = formateXml(data);
          renderVR(scene, data[0].name);
        } else {
          $(".layer-loading").hide()
          $(".layer-error").show()
        }
      });
    }

    // 获取房源vr数据
    if (formatUrl.getQuery("houDelId")) {
      requestAjax({
        url: "/shulan-jjr-gateway/api/v1/hou/getVrData",
        data: {
          delId: formatUrl.getQuery("houDelId"),
        },
      }).then((res) => {
        if (res.isSuccess) {
          let data = res.content.panorama;
          let scene = formateXml(data);
          renderVR(scene, data[0].name);
        } else {
          // 失败的页面
        }
      });
    }

    // 获取经纪人和房源的基本信息
    if (formatUrl.getQuery("houDelId")) {
      requestAjax({
        url: "/shulan-jjr-gateway/api/v1/hou/getAgentAndDelInfo",
        contentType: "application/x-www-form-urlencoded",
        type: "post",
        data: {
          delId: formatUrl.getQuery("houDelId"),
        },
      }).then((res) => {
        if (res.isSuccess) {
          const content = formatHouseInfo(res.content);

          shareVr(content);
          renderHouseInfo(content);
          renderJjrInfo(content);
        }
      });
    }

    function formateXml(data) {
      const appendChild = (parent, child) => {
        let i = parent.lastIndexOf("/") - 1;
        return parent.slice(0, i) + child + parent.slice(i);
      };

      let krpanoXml = "<krpano></krpano>";
      let totalXml = data.reduce((result, scene) => {
        let sceneXml = `<scene name="${scene.name}" title="${scene.title}" thumburl="${scene.thumburl}"></scene>`;
        let viewXml = `<view hlookat="-1" vlookat="11" fovtype="MFOV" fov="120" fovmin="70" fovmax="140" limitview="auto" />`;
        let imageXml = `<image></image>`;
        let bodyXml = scene.imgList.reduce((i, j) => {
          return i + `<${j.name} url="${j.url}" rotate="0" flip="" />`;
        }, "");

        imageXml = appendChild(imageXml, bodyXml);
        sceneXml = appendChild(sceneXml, viewXml);
        sceneXml = appendChild(sceneXml, imageXml);

        return result + sceneXml;
      }, "");

      krpanoXml = appendChild(krpanoXml, totalXml);
      return krpanoXml;
    }

    function renderVR(scene, sceneName) {
      var krpanyReady = function (krpano) {
        krpano.call("loadxml(" + scene + ");skin_startup()");
        krpano.call(`loadscene(${sceneName})`);
        initScene({
          from: "2d",
          access: formatUrl.getQuery("access") || "",
          krpano,
        });
      };

      embedpano({
        swf: BASE_URL + "tour.swf",
        xml: BASE_URL + "tour.xml",
        target: "pano",
        html5: "auto",
        mobilescale: 1.0,
        passQueryParameters: true,
        onready: krpanyReady,
      });
    }

    function renderJjrInfo(data) {
      $("#jjr-tel img").attr(
        "src",
        BASE_URL + "skin/icons/icon_pano_dainhua.png"
      );
      $(".js-house-info img").attr(
        "src",
        BASE_URL + "skin/icons/icon_pano_fangyuan.png"
      );
      $(".js-pano-share img").attr(
        "src",
        BASE_URL + "skin/icons/icon_pano_share.png"
      );
      $(".layer-house-info img").attr(
        "src",
        BASE_URL + "skin/icons/icon_pano_close.png"
      );
      $(".share-tip img").attr(
        "src",
        BASE_URL + "skin/icons/icon_pano_share_tip2.png"
      );

      let defaultHead = BASE_URL + "skin/icons/default_head.png";
      let src = data.avatar || defaultHead;
      $("#avatar-url").attr("src", src);
      $(".agent-wrap .name").text(getActiveStr(data.realName, 14) || "");
      $("#jjr-tel").attr("href", `tel:${data.mobile}`);
    }
  });
});
